@import './variables.less';
@import '../../style/mixins.less';

.fnx-collapse-item {
	position: relative;

	&::after {
		.hairline-top(var(--fnx-border-color), var(--fnx-padding-md), var(--fnx-padding-md));
	}

	&__content {
		padding: var(--fnx-collapse-item-content-padding);
		color: var(--fnx-collapse-item-content-text-color);
		font-size: var(--fnx-collapse-item-content-font-size);
		line-height: var(--fnx-collapse-item-content-line-height);
		background-color: var(--fnx-collapse-item-content-background-color);
	}

	&__content-wrapper {
		overflow: hidden;
		transition: height var(--fnx-collapse-item-transition-duration)
			ease-in-out;
		will-change: height;
	}

	&__arrow {
		transition: transform var(--fnx-collapse-item-transition-duration);
		transform: rotate(90deg);
	}

	&__header {
		&::after {
			display: none;
		}
	}

	&--expended {
		.fnx-collapse-item__header {
			&::after {
				display: block;
			}
		}

		.fnx-collapse-item__arrow {
			transform: rotate(-90deg);
		}
	}

	&--ghost {
		&::after {
			display: none;
		}

		.fnx-collapse-item__header {
			&::after {
				display: none;
			}
		}
	}

	&--disabled {
		.fnx-collapse-item__header {
			cursor: not-allowed;
			color: var(--fnx-collapse-item-title-disabled-color);

			&:active {
				background-color: var(--fnx-white);
			}
		}

		.fnx-collapse-item__arrow {
			color: var(--fnx-collapse-item-title-disabled-color);
		}
	}
}
